<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<fmt:setBundle basename="lang.message" />

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<jsp:include page="Redir.jsp"></jsp:include>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<link href="<c:url value='/css/default.css'/>" rel="stylesheet" type="text/css"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><fmt:message key="general.title"/> - <fmt:message key="searchempty.title"/></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript">
    $(function() {
        $( "#startDate" ).datepicker({
        	dateFormat : "dd-M-yy",
            minDate : "Now",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function( selectedDate ) {
                $( "#endDate" ).datepicker( "option", "minDate", selectedDate );
                var actualDate = new Date(selectedDate);
                var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate()+6);
                $( "#endDate" ).datepicker( "option", "maxDate", newDate );
            }
        });
        $( "#endDate" ).datepicker({
        	dateFormat : "dd-M-yy",
            defaultDate: "Now",
            changeMonth: true,
            numberOfMonths: 1,
            minDate: $( "#startDate" ).val(),
            onClose: function( selectedDate ) {
                $( "#startDate" ).datepicker( selectedDate + 1);
            }
        });
    });
</script>
</head>
<body>
<%@include file="Header.jsp" %>
<div id="wrapper">	
    <div id="page-wrapper">
		<div id="page">
				<%@include file="Menu.jsp" %>   
			<div id="content">
	<form name="searchform" action="SearchEmptyFacility" method="post">
		<h2><fmt:message key="searchempty.title"/></h2>
		<table class="table-view">
			<tr>
				<td><fmt:message key="searchempty.field.type"/></td>
				<td><select name="type">
						<option value="ClassRoom" ${empty type || type == 'ClassRoom' ? 'selected="selected"' : '' }>Class Room</option>
						<option value="DiscussionRoom" ${type == 'DiscussionRoom' ? 'selected="selected"' : '' }>Discussion Room</option>
						<option value="MeetingRoom" ${type == 'MeetingRoom' ? 'selected="selected"' : '' }>Meeting Room</option>
						<option value="MSPH" ${type == 'MSPH' ? 'selected="selected"' : '' }>Multi-Purpose-Hall</option>
					</select>
				</td>
			</tr>
			<tr>
				<td><fmt:message key="searchempty.field.period"/></td>
				<td>
					<input type="text" name="startDate" id="startDate" size="12" value="${startDate}" />
					- 
					<input type="text" name="endDate" id="endDate" size="12" value="${endDate}" />
				</td>
			</tr>			
		</table>
		<input type="submit" value="<fmt:message key='searchempty.search'/>" class="button-style"/>
	</form>
	
	<c:if test="${not empty schedule}">
		<br/><br/>
		<h2>Search Result</h2>
		<table class="table-view">
			<tr>
				<th>Facility</th>
				<c:forEach items="${dateList}" var="dtList">
					<th>${dtList}</th>
				</c:forEach>
			</tr>
			
			<c:forEach items="${schedule}" var="keyList" varStatus="rowStatus">
			<tr class="${rowStatus.index % 2 == 0 ? 'even' : 'odd' }">
				<td>${keyList.key}</td>
				<c:forEach items="${keyList.value}" var="valueList"  varStatus="status">
					<c:choose>
						<c:when test="${valueList}">
						<c:url var="bookUrl" value="ProcessBooking" scope="page">
								<c:param name="type" value="${type}"></c:param>
								<c:param name="facility" value="${keyList.key}"></c:param>
								<c:param name="startDate" value="${dateList[status.index]}"></c:param>
							</c:url>
							<td><a href="${bookUrl}">Book</a></td>
						</c:when>
						<c:otherwise><td>X</td></c:otherwise>
					</c:choose>
				</c:forEach>
			</tr>
			</c:forEach>
			
		</table>
		
		
	</c:if>
	</div>
	</div>
</div>
</div>
<%@include file="Footer.jsp" %>
</body>
</html>